<template>
  <el-card  class="box-card">
    <div slot="header" class="clearfix">
      <el-row :gutter="150">
        <el-col :span="60">
          <el-tag>第一个点坐标标点</el-tag><br>
          <span>x坐标点</span>
          <el-input class="input" v-model="x" placeholder="请输入x"></el-input><br>
          <span>y坐标点</span>
          <el-input class="input" v-model="y" placeholder="请输入y"></el-input><br>
          <span>z坐标点</span>
          <el-input class="input" v-model="z" placeholder="请输入z"></el-input><br>
        </el-col>
        <el-col :span="60">
          <el-tag>第二个点坐标标点</el-tag><br>
          <span>x1坐标点</span>
          <el-input class="input" v-model="x1" placeholder="请输入x"></el-input><br>
          <span>y1坐标点</span>
          <el-input class="input" v-model="y1" placeholder="请输入y"></el-input><br>
          <span>z1坐标点</span>
          <el-input class="input" v-model="z1" placeholder="请输入z"></el-input>
        </el-col>
      </el-row>
      <el-button type="success" round style="margin-left: 350px" @click="sheng">生成</el-button>
    </div>
    <span v-if="xyz!=''">原点到数据点距离{{ xyz }}</span>
    <div style="margin: auto" id="chart" :style="{height:height,width:width}" />
  </el-card>

</template>

<script>
import 'echarts-gl';
import echarts from 'echarts'
import resize from '../../components/Charts/mixins/resize'
import charts from '@/router/modules/charts'

export default {
  name: 'three',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data(){
    return{
      x:'',
      y:'',
      z:'',
      x1:'',
      y1:'',
      z1:'',
      xyz:''
    }
  },
  mounted() {
    // this.setChart()
  },
  methods:{
    sheng(){
      this.setChart()
      var arr=Math.pow(this.x1-this.x,2)+Math.pow(this.y1-this.y,2)+Math.pow(this.z1-this.z,2)
      this.xyz=Math.sqrt(arr)
      console.log(this.xyz)
    },
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))
      var data = [];
      // Parametric curve
      var x = this.x;
      var y = this.y;
      var z = this.z;
      var x1 = this.x1;
      var y1 = this.y1;
      var z1 = this.z1;
      data.push([x,y,z],[x1,y1,z1]);
      console.log(data.length);
      var option = {
        tooltip: {},
        backgroundColor: '#fff',
        visualMap: {
          show: false,
          dimension: 2,
          min: 0,
          max: 30,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          }
        },
        xAxis3D: {
          type: 'value'
        },
        yAxis3D: {
          type: 'value'
        },
        zAxis3D: {
          type: 'value'
        },
        grid3D: {
          viewControl: {
            projection: 'orthographic'
          }
        },
        series: [
          {
            type: 'line3D',
            data: data,
            lineStyle: {
              width: 4
            }
          }
        ]
      };
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.box-card{
  width: 800px;
  height: 900px;
  shadow: "always";
  margin: auto;
  margin-top: 20px;
}
.input{
  width: 200px;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
